<template>
	<view>
		<cu-custom isBack bgColor="var(--primaryBg)">
			<view slot="content" class="title">
				档案管理
			</view>
		</cu-custom>
		<view class="head">
			<image class='left-icon' src='/static/icon/archive.png'></image>
			<view class='title'>{{name}}</view>
		</view>
	
		<view class='list'>
			<view  v-if='isNull' style='margin-top: 200rpx;'>
				<data-null></data-null>
			</view>
			<view class='list-item' v-for='item in list' :key='item.id'>
				<view class="title">{{item.title}}</view>
				<view class="user">
					<image class='icon' src='/static/icon/user.png'></image>
					<view class='name text-cut'>档案确认方: {{item.confirmBy}}</view>
				</view>
				<view class='des'>对方确认以上信息，并对不实信息承担相关责任</view>
				<textItem :itemId='index' :content='item.content'></textItem>
				<view class='btns'>
					<view class='btn-item red' @click='handleDel(item)'>删除</view>
				</view>
			</view>
		</view>
		
		<view class='submit' @click='handleAdd'>
			<image class='icon' src="https://qiyeji.oss-cn-beijing.aliyuncs.com/20250111/202412181419447233.png" mode=""></image>
			<text>添加档案</text>
		</view>
		
		<showModal1 ref='showModal1'></showModal1>
	</view>
</template>

<script>
	import util from '@/common/util'
	import {pageRecord_base,delRecord_base} from '@/api/pet/archive/base'
	import {getCargoDetail} from '@/api/pet/index/saler'
	
	import textItem from './text-item'
	import showModal1 from '@/components/show-modal1'
	export default {
		components: {
			textItem,
			showModal1
		},
		data() {
			return {
				isNull: false,
				name: '--',
				params: {
					page: 1,
					limit: 10,
					cargoId: undefined,
					teamId: undefined
				},
				total: 0,
				list: [],
			}
		},
		onLoad(e) {
			let teamInfo = uni.getStorageSync('pet_team')
			if(!teamInfo) {
				this.list = [];
				this.isNull = true;
				return;
			}
			
			this.params.teamId = teamInfo.teamId;
			this.params.cargoId = e.id
			this.init()
		},
		onPullDownRefresh() {
			this.init()
		},
		onReachBottom() {
			if (this.total > this.params.page * this.params.limit) {
				this.params.page++;
				this.getList()
			}
		},
		methods: {
			init() {
				this.list = [];
				this.params.page = 1;
				uni.showLoading({
					mask: true
				})
				this.getCargoDetail()
				this.getList()
			},
			getCargoDetail() {
				getCargoDetail({id: this.params.cargoId}).then(res => {
					this.name = res.recordName;
				})
			},
			getList() {
				this.isNull = false;
				pageRecord_base(this.params).then(res => {
					this.total = res.total;
					this.list = [...this.list,...res.rows]
					uni.hideLoading()
					uni.stopPullDownRefresh()
					if(!this.list.length) {
						this.isNull = true;
					}
				})
				
			},
			handleDel(item) {
				let that = this;
				this.$refs.showModal1.open({
					content: '确定要删除该档案吗?',
					success() {
						uni.showToast({mask: true})
						delRecord_base({opid: item.id}).then(res => {
							uni.hideLoading()
							that.init()
						})
					}
				})
			},
			handleAdd() {
				this.toPage('/pagesPet/pages/archives/add/index?type=1&cargoId=' + this.params.cargoId + '&isServe=1')
			},
			toPage(url) {
				util.navigateTo({
					url
				})
			},
		}
	}
</script>

<style>
	page{
		background: #F8F8F8;
	}
</style>
<style scoped lang="scss">
	.title{
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 34rpx;
		color: var(--h1Color);
		line-height: 48rpx;
	}
	.head{
		display: flex;
		align-items: center;
		background: var(--primaryBg);
		padding: 12rpx 32rpx 48rpx;
		image{
			width: 50rpx;
			height: 50rpx;
			margin-right: 8rpx;
		}
		view{
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 36rpx;
			color:var(--h1Color);
			line-height: 50rpx;
		}
	}
	.list {
		position: relative;
		top: -24rpx;
		padding: 16rpx;
		background: #F8F8F8;
		border-radius: 32rpx 32rpx 0 0;
		// #F8F8F8
		.list-item {
			width: 100%;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 28rpx 24rpx;
			margin-bottom: 16rpx;

			.title {
				font-weight: 600;
				font-size: 34rpx;
				color:var(--h1Color);
				line-height: 48rpx;
			}

			.user {
				margin-top: 16rpx;
				display: flex;
				align-items: center;
				line-height: 1;
				color: var(--h2Color);

				.icon {
					width: 26rpx;
					height: 26rpx;
					margin-right: 12rpx;
				}
				
				.name {
					max-width: 600rpx;
				}
			}

			.des {
				margin-top: 6rpx;
				font-size: 22rpx;
				color:var(--h4Color);
			}
			
			.btns {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				margin-top: 24rpx;
				
				.btn-item {
					padding: 0 42rpx;
					height: 70rpx;
					border-radius: 12rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 26rpx;
					
					&.red {
						background: rgba(255,38,38,0.05);
						color: #FF2626;
					}
				}
			}

		}
	}
	
	.submit {
		position: fixed;
		bottom: 160rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 202rpx;
		height: 80rpx;
		background: var(--primaryBg);
		box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0,0,0,0.03);
		border-radius: 40rpx;
		border: 4rpx solid #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 600;
		font-size: 28rpx;
		color: var(--btnColor);
		line-height: 1;
		
		.icon {
			width: 30rpx;
			height: 30rpx;
			margin-right: 12rpx;
		}
	}
</style>